iT邦幫忙

2024 iThome 鐵人賽

DAY 2
1
Modern Web

30天用Vitepress 開啟我的"部落客"生活系列 第 2

[Day02] - 環境準備&對齊

  • 分享至 

  • xImage
  •  

banner02

看一篇文章最大的不是寫的爛,
而是他環境跟你差的遠遠的。
-------------------- By Opshell

※ 廣告:請考慮到Opshell's Blog以獲得更好的閱讀體驗。

開始蓋部落格之前,先對齊一下工程環境。

系統:Window 11

我知道很多工程師都愛用蘋果系統,但我待過的公司都用windows,所以...

編輯器:VS Code

市占率最高的編輯器,應該沒什麼問題。

終端機:PowerShell 7

如果本來是PowerShell 5 要安裝7 可能會有一點點問題 請參考
查看powershell版本方式:在powershell中輸入:↓↓↓

Get-Host | Select-Object Version

安裝完之後,記得把VS code的預設終端機改成PowerShell
快捷鍵:ctrl + ~開啟終端,然後在右下可以設定預設終端機喔:

終端機右下

要選PowerShell 7 喔

Node版本管理:NVM

NVM 建議安裝在C:
確認 NVM 有沒有安裝好

  nvm version

你的 nvm 指令老是無法成功,或者出現了亂碼,請將 NVM 安裝在 C:\ 下,或者使用系統管理員權限執行。

Node.Js:Node.js

身為一個會玩前端的園丁,裝個Node.js應該也是很正常的一件事。
看了前面的環境,你不會以為我下的指令不是在Windows吧?

確認安裝了什麼版本的node

  nvm list

安裝 Node.js 20.11.1 版本 (Vitepress 需要 18 以上的版本,Opshell 安裝目前自己最常使用的穩定版本。)

  nvm install 20.11.1

切換到20.11.1版的Node

nvm use 20.11.1

node 版本

套件管理 yarn

抱歉了各位,我還沒有跳槽到 pnpm 學不完阿~~~~
全域安裝 yarn ↓↓↓

npm install -g yarn

確認 yarn 版本↓↓↓

yarn -v

好用的 VS Code 套件推薦:

1. Chinese (Traditional) Language Pack for Visual Studio Code

我英文不好,很需要這個。

2. Error Lens

錯誤視覺化、配合 typescript 哪邊怪怪的馬上就會知道。

3. File Nesting Updater

把一堆雜檔好好的縮在一起,保護眼睛及腦袋不受訊息轟炸。

4. GitHub Copilot

5. GitHub Copilot Chat

好處太多了我找一天專門寫文章歌頌他,Github請記得付我工商的費用,開玩笑的

6. Material Icon Theme

沒啥原因,就是覺得順眼喜歡。\

7. Power Mode

寫扣,不炫砲,不成活。

8. Todo Tree

超級無敵好用,只是配置要花一些心力,用了一樣回不去了!!

以上這些套件,沒裝不會怎樣,裝了很不一樣!! (年紀透漏)

小結:

這篇文章,水分大概是99%吧,
好像對齊了環境,又好像什麼都沒做。
各位晚安。


上一篇
[Day01] - Opshell 的碎碎念 - 前言
下一篇
[Day03] - Vitepress Blog
系列文
30天用Vitepress 開啟我的"部落客"生活30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言